<template>
	<view class="unv-progress" :style="[progressStyle]">
		<view class="unv-progress-back" :style="[backStyle]"></view>
		<view class="unv-progress-inner" :style="[progressInnerStyle]">
			<view class="unv-progress-image">
				<image :src="imgUrl+'upload/img/ws_static/static/mall/shandian.png'"></image>
			</view>
		</view>
		<view class="ratio-tips">
			<text>已抢</text>
			<view class="ratio-num">
				<text>{{ratio}}%</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	/**
	 * unv-progress 进度条 支持图片进度条
	 * @description 支持h5、小程序；其他未测试
	 * @property {Number} ratio 进度比例
	 * @property {String} img 进度条末端图片URL或base64
	 * @property {String} progressHeight 进度条高度
	 * @property {String} backColor 进度条背景颜色
	 * @property {String} innerColor 进度条内部颜色
	 * @property {String} imgWidth 图片宽度 没有放开图片高度是因为高度是根据进度条的高度自动计算的
	 **/
	 	import Config from "@/config";
	export default {
		name: "unv-progress",
		props: {
			// 进度比率
			ratio: {
				type: Number,
				require: false,
				default: 50
			},
			// 进度条盒子背景色
			backColor: {
				type: String,
				require: false,
				default: '#eae4df'
			},
		},
		data() {
			return {
				imgUrl: Config.imgUrl,
			};
		},
		computed: {
			backStyle() {
				return {
					backgroundColor: this.backColor
				}
			},
			//计算进度条内部的颜色宽度
			progressInnerStyle() {
				return {
					width: (this.ratio ? this.ratio : 0) + '%',
				}
			},
		},

	}
</script>

<style lang="scss" scoped>
	.unv-progress {
		width: 100%;
		height: 40rpx;
		position: relative;
		overflow: visible;

		.unv-progress-back {
			top: 0;
			height: 100%;
			width: 100%;
			position: absolute;
			background-color: #eae4df;
			transition: width 500ms;
			z-index: 10;
			overflow: visible;
		}

		.unv-progress-inner {
			top: 0;
			height: 100%;
			width: 0;
			position: absolute;
			background: linear-gradient(to right, #FF6242, #FF4500 50%, #FF2E2A);
			transition: width 500ms;
			z-index: 11;
			border-radius: 0 18rpx 18rpx 0;
		}

		.unv-progress-image {
			position: absolute;
			height: 38rpx;
			width: 38rpx;
			line-height: 38rpx;
			text-align: center;
			box-sizing: border-box;
			overflow: hidden;
			border-radius: 50%;
			border: 3rpx solid #fff;
			top: 0rpx;
			right: 0;
			& > image {
				width: 34rpx;
    			height: 34rpx;
				
			}
		}
	}
	.ratio-tips {
		position: absolute;
		top: 2rpx;
		left: 18rpx;
		z-index: 13;
		font-size: 22rpx;
		color: #fff;
		display: flex;
		align-items: center;
		width: 100%;
		line-height: 38rpx;
	}
	.ratio-num {
		transform: scale(.85);

	}
</style>